<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7_4_1-选项式API用户列表</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" name="sex" :value="-1" v-model="sexFilter" />全部
                <input type="radio" name="sex" :value="0" v-model="sexFilter" />男
                <input type="radio" name="sex" :value="1" v-model="sexFilter" />女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                    </tr>
                    <tr v-for="(data,index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex==0?'男':'女'}}</td>
                    </tr>
                </table>
            </div>
        </div>



    </div>



    <script>
        const App = Vue.createApp({
            data() {
                return {
                    //性别筛选字段
                    //0：性别男，1：性别女，0：全部
                    sexFilter: -1,
                    //展示的用户列表数据
                    showDatas: [],
                    //搜索的关键词
                    searchKey: ""
                }
            },

            methods: {
                //获取用户数据
                queryAllData() {
                    this.showDatas = mock
                },
                filterData() {
                    this.searchKey = ""
                    if (this.sexFilter == -1) {
                        this.showDatas = mock
                    } else {
                        this.showDatas = mock.filter((data) => {
                            return data.sex == this.sexFilter
                        })
                    }
                },

                //进行关键词检索
                searchData() {
                    this.sexFilter = -1
                    if (this.searchKey.length == 0) {
                        this.showDatas = mock
                    } else {
                        this.showDatas = mock.filter((data) => {
                            //名称中包含输入的关键词则表示匹配成功
                            return data.name.search(this.searchKey) != -1
                        })
                    }
                }
            },

            mounted() {
                //模拟请求过程，在组件挂载时用来获取数据
                setTimeout(this.queryAllData, 1);
            },

            watch: {
                sexFilter(oldValue, newValue) {
                    this.filterData()
                },
                searchKey(oldValue, newValue) {
                    this.searchData()
                }
            }

        })
        App.mount('#Application')
    </script>

    <script>
        let mock = [
            {
                name: "小王",
                sex: 0
            },

            {
                name: "小红",
                sex: 1
            },

            {
                name: "小李",
                sex: 1
            },

            {
                name: "小张",
                sex: 0
            },

            {
                name: "小玉",
                sex: 1
            },
        ]
    </script>

    <style>
        .container {
            margin: 50px;
        }

        .content {
            margin: 20px;
        }
    </style>

</body>

</html>